/**
 * Created by lenovo on 2017/2/2.
 */
$(function () {
    initTab();
    tabclick();
    ulanimate();
});
/*响应式 产品模块的 移动端时可以滑动（让ul足够宽 即多有li的width的和）*/
function initTab(){
    /* 1.计算ul的宽度 并设置
     * 2.让父容器溢出隐藏
     * 3.初始化 滑动组件
     */
    /*  获取相关元素*/
    var $parent = $('.nav-box');
    var $child = $parent.find("ul");
    var $lis = $child.find("li");

    /*计算ul的宽度 遍历lis*/
    var width = 0;
    $lis && $lis.each(function(){
        width += $(this).outerWidth(true);
        /*获取宽度
         * width() 获取的是内容的宽度
         * innerwidth（）获取是内容和内边距
         * outerwidth（）获取的是内容+内边距+边框
         * outerwidth（true）获取的是内容+内边距+边框+外边距*/

    });
    /*设置ul的宽度*/
    $child.width(width);
    /*初始化滑动组件
     * 引用swipe.js文件
     * */
    itcast.iScroll({
        /*$parent是jQuery对象 要转化为dom对象*/
        swipeDom:$parent.get(0),
        swipeType:"x",
        swipeDistance:50
    });
    /*导航点击 页面过度效果*/
    $lis.on('click',function(){
        tabclick();
    });

    $('.zl-exp-tabs > li > a').on('click',function(){
        ulanimate();
    })
}
/*skill的canvas动画*/
function arc(id1,end,id2){ //参数：父盒子id  结束位置  canvas的id
    /*获取canvas父盒子*/
    var casBox = document.getElementById(id1);
    // console.log(casBox);
    casBox.innerHTML="<canvas width='160' height='160' id='"+id2+"'></canvas>";
    function toAngle(radin) {
        return radin * 180 / Math.PI;
    }
    function toRadin(angle) {
        return angle * Math.PI / 180;
    }
    var cas = document.getElementById(id2);
    // console.log(cas);
    var ctx = cas.getContext('2d');
    ctx.clearRect(0,0,cas.width,cas.height);
    var x1 = cas.width / 2;
    var y1 = cas.height / 2;
    var radius1 = 80;
    ctx.beginPath();
    ctx.arc(x1, y1, radius1, 0, 2 * Math.PI);
    ctx.strokeStyle = '#333';
    ctx.stroke();

    ctx.beginPath();
    var x2 = cas.width / 2;
    var y2 = cas.height / 2;
    var radius2 = 70;
    ctx.arc(x2, y2, radius2, 0, 2 * Math.PI, true);
    ctx.strokeStyle = '#333';
    ctx.stroke();

//       ctx.fill();

    var x3 = cas.width / 2;
    var y3 = cas.height / 2;
    var radius3 = 75;
    ctx.lineWidth = 10;
    var start = toRadin(-90);
    var now = toRadin(-90);//结束位置
    var step = toRadin(5);
    var intervalId = setInterval(function () {

        now += step;
        if (now >= toRadin(end)) {
            now = toRadin(end);
            clearInterval(intervalId);
        }
        // ctx.strokeStyle = 'rgba(255,0,0,.2)';
        ctx.strokeStyle = '#17e7a4';
        ctx.beginPath();
        ctx.arc(x3, y3, radius3, start, now);
        start = now-toRadin(1);
        ctx.stroke();
        ctx.beginPath();
    }, 15);
}
var skillBtn= document.querySelector("a[href='#Skills']");
// console.log(skillBtn);
skillBtn.onclick=function(){
    arc('casBox-Html',234,'cas1');
    arc('casBox-css',234,'cas2');
    arc('casBox-js',198,'cas3');
    arc('casBox-jq',198,'cas4');
    arc('casBox-bt',198,'cas5');
    arc('casBox-ng',162,'cas6');
    // arc('casBox-css',216);
}

function tabclick(){
    $('.tab-pane').removeClass('animate');
    setTimeout(function () {
        $('.tab-pane.active').addClass('animate');
    },3)
}
function ulanimate(){
    $('.zl-exp .tab-pane ul').removeClass('animate');
    setTimeout(function () {
        $('.zl-exp .tab-pane.active ul').addClass('animate');
    },3);

}